<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>重新布局不改变视窗</title>
  </head>
  <body>
    <button id="changeView">删除一个分支</button>
    <div id="mountNode"></div>
    <script src="../build/g6.js"></script>
    <script src="../build/grid.js"></script>
    <script>
      const grid = new Grid();
      const graph = new G6.TreeGraph({
        plugins: [grid],
        container: 'mountNode',
        width: 500,
        height: 500,
        defaultNode: {
          size: [20, 20],
          style: {
            fill: '#40a9ff',
            stroke: '#096dd9',
          },
        },
        defaultEdge: {
          shape: 'cubic-horizontal',
          style: {
            stroke: '#A3B1BF',
          },
        },
        modes: {
          default: [
            'drag-node',
            'drag-canvas',
            {
              type: 'collapse-expand',
              onChange(item, collapsed) {
                const data = item.getModel();
                data.collapsed = collapsed;
                return true;
              },
            },
          ],
        },
        layout: {
          type: 'dendrogram',
          nodeSep: 50,
          rankSep: 100,
          direction: 'LR',
        },
      });

      let data = {
        // isRoot: true,
        id: 'Root',
        style: {
          fill: 'red',
        },
        children: [
          {
            id: 'SubTreeNode1',
            raw: {},
            children: [
              {
                id: 'SubTreeNode1.1',
              },
            ],
          },
          {
            id: 'SubTreeNode2',
            children: [
              {
                id: 'SubTreeNode2.1',
              },
              {
                id: 'SubTreeNode2.2',
              },
            ],
          },
        ],
      };

      graph.data(data);
      graph.render();

      graph.fitView();

      document.getElementById('changeView').addEventListener('click', evt => {
        const matrix = G6.Util.clone(graph.get('group').getMatrix());
        data.children.pop();
        graph.changeData(data);
        graph.get('group').setMatrix(matrix);
        graph.paint();
      });
    </script>
  </body>
</html>
